<script setup>
import {ref, onMounted, reactive} from 'vue';
  import thirdPartyHeader from '../components/ThirdParty/third-party-header.vue';
  import informationCard from '../components/information-card.vue';
  import thirdPartyInformationCard from '../components/ThirdParty/third-party-information-card.vue';
  import informationCard2 from '../components/ThirdParty/information-card2.vue';
  import icon4 from '../assets/icon/money.svg';
  import back4 from '../assets/icon/money-bg.svg';
  import contractTotal from '../components/ThirdParty/contract-total.vue';
  import businessCenter from '../components/ThirdParty/business-center.vue';
  import institutionalPortrait from '../components/ThirdParty/institutional-portrait.vue';
  import regionalDistribution from '../components/ThirdParty/regional-distribution.vue';
  import contractDistribution from '../components/ThirdParty/contract-distribution.vue';
  import institutionTrend from '../components/ThirdParty/institutional-trend.vue';
  import { useRouter } from "vue-router";
  import { getInstitutionTotal, getEcharts, getTables, getcontractAmount, getcontractTotal, getexpertTotal} from '../api/third-party'
  import {getBuReport, getContractCount} from "@/api/third-party-refactor.js";
  import _ from 'lodash';

  const router = useRouter();
  const renderKey = ref();
  const title = '基本信息：';
  const content = ref('实现全集团范围的第三方服务机构合同信息和受聘于第三方服务机构的人员信息的线上收集、校验、自动报送国资委。');
  const frequency = ref('按需上报');
  const thirdPartyInstitution = ref({
    thirdPartyInstitutionTotal: '-',
    contractTotal: '-',
    contractAmount: '-',
    expertTotal: '-',
  });
  const echartsData = ref();
  const tablesData = ref();
  const month = ref();
  const getMonth = (monthValue) => {
    month.value = `${monthValue}月`;
  }
  const year = ref(new Date().getFullYear());
  const getYear = (value) => {
    year.value = value;
  };

  const getInstitutionTotalData = (params) => {
    getInstitutionTotal(params).then(res => {
      if(res.code === 200 && res.data !== null){
        thirdPartyInstitution.value.thirdPartyInstitutionTotal = res.data;
      }
    })
  }
  const getcontractTotalData = (params) => {
    getcontractTotal(params).then(res => {
      if(res.code === 200 && res.data !== null){
        thirdPartyInstitution.value.contractTotal = res.data;
      }
    })
  }
  const getcontractAmountData = (params) => {
    getcontractAmount(params).then(res => {
      if(res.code === 200 && res.data !== null){
        thirdPartyInstitution.value.contractAmount = res.data;
      }
    })
    
  }
  const getexpertTotalData = (params) => {
    getexpertTotal(params).then(res => {
      if(res.code === 200 && res.data !== null){
        thirdPartyInstitution.value.expertTotal = res.data;
      }
    })
  }
  const getEchartsData = (params) => {
    getEcharts(params).then(res => {
      if(res.code === 200 && res.data){
        echartsData.value = res.data;
        renderKey.value = Math.random();
      }
    })
  }
  const getTablesData = (params) => {
    getTables(params).then(res => {
      if(res.code === 200 && res.data){
        tablesData.value = res.data;
        renderKey.value = Math.random();
      }
    })
  }
  const buReportInfo = ref({});
  const queryBuReportInfo = (params) => {
    getBuReport(params).then(res => {
      if (res.code === 200) {
        buReportInfo.value = res.data;
      }
    })
  }
  const contractCountInfo = reactive({
    reportCount: '-',
    reportRatio: '-'
  })
  const queryContractCount = (params) => {
    getContractCount(params).then(res => {
      if (res.code === 200) {
        Object.assign(contractCountInfo, res.data);
      }
    })
  }
  const queryParams = reactive({
    buCode: undefined,
    month: undefined,
    ldap: undefined,
    year: undefined,
  })
  const dataInit = (params) => {
    params.ldap = router.currentRoute.value.query.ldap
    params.year = year.value;
    Object.assign(queryParams, params);
    console.log('params++++', params)
    getInstitutionTotalData(params)
    getcontractTotalData(params)
    getcontractAmountData(params)
    getexpertTotalData(params)
    getEchartsData(params)
    getTablesData(params)
    queryBuReportInfo(params)
    queryContractCount(params)
  }
  onMounted(() => {
  // let query = router.currentRoute.value.query;
  // const params = {
  //   buCode: query.buCode || '50',
  //   month: new Date().getMonth() + 1,
  //   ldap: query.ldap,
  //   year: new Date().getFullYear(),
  // }
  // dataInit(params);
  windowResize();
})

const randomFun = _.debounce(() => {
  renderKey.value = Math.random();
}, 200)

const windowResize = () => {
  window.addEventListener('resize', randomFun);
}
</script>

<template>
 <div class="largeScreenContainer">
    <huarun-header title="聘用第三方服务机构管理简报" :detailMonth="true" @getData="dataInit" @getMonth="getMonth" @getYear="getYear"/>
    <!-- <div class="demo">样例数据</div> -->
    <div v-if="queryParams.buCode !== undefined" :key="renderKey" class="column-flex">
      <thirdPartyHeader :title="title" :content="content" :frequency="frequency" department="集团法律合规部" office="国资委法规局"/>
      <div class="row-flex lineTwo">
        <div class="div-border lineOne-div" style="flex: 1">
          <thirdPartyInformationCard :title="queryParams.buCode === '50' ? '业务单元' : '上报单位'" :buCode="queryParams.buCode" class="card-style" :report="buReportInfo.reported" :unReport="buReportInfo.unreported"/>
        </div>
        <div style="flex: 3; display: flex; gap: 25px">
          <div class="div-border lineTwo-div">
            <informationCard2 title="当月上报合同" :total="contractCountInfo.reportCount" :percent="contractCountInfo.reportRatio" class="card-style"/>
          </div>
          <div class="div-border lineOne-div">
            <informationCard title="当月上报合同金额" :data="thirdPartyInstitution.contractAmount" unit="万" :imgUrl="icon4" :backUrl="back4" class="card-style"/>
          </div>
        </div>
      </div>
      <div class="row-flex lineThree right-main">
        <div class="div-border lineOne-div">
          <businessCenter :queryParams="queryParams"/>
        </div>
        <div class="lineTow-div item-right">
          <div class="div-border">
            <contractTotal :queryParams="queryParams"/>
          </div>
          <div class="div-border lineTow-div right-item">
            <regionalDistribution :queryParams="queryParams"/>
          </div>
          <div class="div-border lineTow-div right-item">
            <institutionalPortrait :queryParams="queryParams"/>
          </div>
        </div>
      </div>
      <div class="row-flex lineTow right-main bottom-main">
        <div class="div-border lineTow-div">
          <contractDistribution :queryParams="queryParams"/>
        </div>
        <div class="div-border lineTow-div">
          <institutionTrend :queryParams="queryParams"/>
        </div>
      </div>
    </div>
 </div>
</template>

<style scoped lang="less">
.largeScreenContainer {
  :deep(.title-content), :deep(.card-title) {
    font-weight: bold;
  }
  :deep(.content-css) {
    font-weight: 300;
  }
}
@media screen and (width < 1920px) {
  .largeScreenContainer {
    width: 1920px;
    min-height: 1080px;
  }
}
.lineTwo {
  width: 100%;
  .lineTwo-div {
    height: 180px;
    flex: 2;
    width: 437px;
    .card-style {
      width: 100%
    }
  }
  .lineOne-div {
    height: 180px;
    flex: 1;
    width: 437px;
    .card-style {
      width: 100%
    }
  }
}
.lineThree {
  width: 100%;
  .lineThree-div {
    width: 50%;
    height: 558px;
  }
  .lineOne-div {
    min-width: 456px;
    width: 437px;
    flex: 1;
  }
  .lineTow-div {
    flex: 3;
    min-width: 0;
  }
}
.demo {
  position: absolute;
  font-weight: bold;
  font-size: 50px;
  color: #cdcacae6;
  transform: rotate(-45deg);
  top: 40%;
  left: 38%;
  letter-spacing: 75px;
}
.right-main {
  align-items: start;
}
.right-item {
  margin-top: 25px;
}
.bottom-main {
  width: 100%;
  margin-bottom: 40px;
  .lineTow-div {
    flex: 1;
  }
}
</style>